// -------------------------获取文章列表 ,渲染页面----------
let form = layui.form
// 实现分页,就是修改请求参数  然后发送ajax请求 重新渲染页面
let data = {   //data是动态的 因为要变换里面值切换  页面   和每次显示的条数是可以变换的
  pagenum: 1,//当前页
  pagesize: 2, //每页显示条数
}
function renderArticle() {
  $.ajax({
    url: '/my/article/list',
    data: data,
    success: function (res) {
      // console.log(res);
      let htmlStr = template('tpl-list', res) //模板
      // console.log(res);
      $('tbody').html(htmlStr); //追加到页面
      showPage(res.total) //调用分页
    }
  })
}
renderArticle();

// ----------------------分页---------------------- 
var laypage = layui.laypage;      //模块加载名称：laypage   
//执行一个laypage实例

function showPage(t) {
  laypage.render({
    elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
    count: t, //数据总数，从服务端得到   因为ajax是异步的所以 要等同步的执行完毕才能执行   所以获取总数要在ajax里面调用分页执行
    limit: data.pagesize,//每页显示多少条
    limits: [2, 4, 6, 8],//下拉框中的值，表示每页显示多少条，可以自己选择
    curr: data.pagenum, // 当前显示的页码
    groups: 5,// 连续出现的页码个数
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    // 切换分页时的回调。
    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数

      //首次不执行
      if (!first) {
        data.pagenum = obj.curr;
        data.pagesize = obj.limit;
        renderArticle()
      }
    }
  });
}

// 是参数的改变 
// -----------------------  发送ajax请求，获取分类 ------------------
$.ajax({
  url: '/my/article/cates',
  success: function (res) {
    // console.log(res);
    if (res.status === 0) {
      let htmlStr = template('tpl-category', res);
      $('select[name=category]').append(htmlStr) ///为什么不用html 是因为html会覆盖  用append 是追加的意思
      // 更换下拉框的渲染
      form.render('select')  ///更新所有下拉框的渲染
    }
  }
})

// ------------------------  完成筛选 ----------------------------

$('#search').on('submit', function (e) {
  e.preventDefault();
  // 获取两个下拉框里面的值
  let cate_id = $('select[name=category]').val();
  let state = $('select[name=state]').val();
  // 改变ajax请求参数
  data.cate_id = cate_id;
  data.state = state;
  // 重置页码为1
  data.pagenum = 1;
  // 重新发送请求获取数据，并渲染
  renderArticle();

})

// -------------------------  删除 --------------------------------------------
// 事件委托的方式
$('body').on('click', 'button:contains("删除")', function () {
  let id = $(this).data('id');
  console.log(id);
  layer.confirm('确认删除吗?', function (index) {
    $.ajax({
      url: '/my/article/delete/' + id,
      success: function (res) {
        console.log(res);
        layer.msg(res.message);
        if (res.status === 0) {
          // 删除后重新渲染页面
          renderArticle();
        }
      }
    })
    layer.close(index);
  })
})